<template>
	<div class="main-page">

		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="78" width="100%">
			<div class="title">产品详情</div>

			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#FFF"></u-icon>
			</view>
		</u-navbar>
		<view>
			<view class="swiper_view">
				<u-swiper :list="imgList" height='800' img-mode="scaleToFill"></u-swiper>
			</view>
			<view class="proname">
				<view class="pronameview">{{goodsDetail.name}}</view>
				<view class="proinduct">{{goodsDetail.describe}}</view>
				<view class="price">零售价 ¥<span style="color: rgb(250, 134, 48);">{{goodsDetail.price}}</span></view>
			</view>

			<view class="dividerview">
				<u-divider style="background-color: none;">商品详情</u-divider>
			</view>
			<view style="padding: 0 28rpx;">
				<!-- <u-image  v-for="item in detailImageList" :src="item" height="320"></u-image> -->
				<img v-for="item in detailImageList" :src="item" alt="" style="width: 100%;">
			</view>

			<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
				<view class="icon-btn">
					<view class="icon-btn-item" @click="clickFavorite">
						<u-icon size="34" class="red" v-if="goodsDetail.isCollect == 1" name="heart-fill"></u-icon>
						<u-icon size="34" v-else name="heart"></u-icon>
						<view v-if="goodsDetail.isCollect == 1" class="red icon-btn-name">收藏</view>
						<view v-else class="icon-btn-name">收藏</view>

					</view>
					<view class="icon-btn-item" @click="reluchToCart()">
						<u-icon size="34" name="storeping-cart"></u-icon>
						<view class="icon-btn-name">购物车</view>
						<view v-if="nums && nums > 0" class="num-icon">{{ nums }}</view>
					</view>

					<view class="icon-btn-item" @click="tostorePage()">
						<u-image src="../../static/newImg/_store.png" width="34rpx" height="34rpx"></u-image>
						<view class="icon-btn-name">店铺</view>

					</view>
				</view>
				<view class="detail-btn">
					<view class="to-store-car to-store-btn" @click="showProductguige">
						加入购物车</view>
					<view class="to-buy to-store-btn" @click="showProductguige">立即购买</view>
				</view>
			</view>
		</view>

		<u-popup v-model="carshow" mode="bottom" :closeable="true" :mask-close-able="false">
			<view class="carshowview">
				<view class="goods-header">
					<view class="goods-img">
						<u-image width="178rpx" class="uimage" height="178rpx" :src="goodsDetail.image"></u-image>
					</view>

					<view class="goods-price">
						<span class="lsj">零售价 </span>
						<span class="price">{{JSON.stringify(currentskuid) == '{}' ? goodsDetail.price :
							currentskuid.price}}</span>
					</view>

					<view class="goods-kc">
						<span>库存1531件</span>
					</view>

					<view class="goods-spgg"> 请选择 商品规格 </view>
				</view>

				<view class="goods-sku">
					<view class="skutitle">商品规格</view>

					<view class="skulist">
						<view class="skulistitem" v-for="item in skulist" :key="item.id"
							:class="item.id == currentskuid.id ? 'skulight' : ''" @click="handleskuclick(item)">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="numbox">
					<view class="numboxtitle">购买数量</view>
					<uni-number-box class="uNumber" :min="0" :max="999" v-model="num"></uni-number-box>
				</view>

				<view class="btns">
					<view class="box-btn-card" @click="addToCartOrBuy('cart')">加入购物车</view>
					<view class="box-btn-buy" @click="addToCartOrBuy('buy')">立即购买</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
import storage from "@/utils/storage.js";
import uniNumberBox from "@/components/uni-number-box";
import {
	productDetails,
	userCollect,
	productSpecifications
} from "@/api/goods.js"

import { userDelCollect } from '@/api/user.js'

export default {

	data() {
		return {
			navObj: {
				backgroundColor: 'rgb(25, 189, 93)',
			},
			nums: '',
			tabScrollTop: null,
			current: "1", //当前显示的轮播图页
			goodsDetail: {}, //商品数据
			imgList: [], //轮播图数据
			favorite: false, //收藏与否flag
			routerVal: "",
			detailImageList: [],
			skulist: [],
			carshow: false,
			num: 1,
			currentskuid: {}
		};
	},

	components: {
		uniNumberBox,
	},

	mounted() {

	},
	async onLoad(options) {
		this.routerVal = options;
		// #ifdef MP-WEIXIN
		// 小程序默认分享
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"],
		});
		// #endif
	},
	async onShow() {
		this.goodsDetail = {};
		if (this.routerVal.id) {
			this.init()
		}
	},

	methods: {

		handleskuclick(item) {
			this.currentskuid = item;
		},
		onClickLeft() {
			uni.navigateBack();
		},
		async init() {
			let data = {}
			if (this.$options.filters.isLogin("auth")) {
				data.userId = storage.getUserInfo().id
			} else {
				data.userId = 0
			}

			data.id = this.routerVal.id;
			productDetails({
				...data
			}).then(res => {
				if (res.code == '000000') {
					this.goodsDetail = res.data;
					let arr = [];
					let arrlist = [];
					if (res.data.smallImage != null) {
						res.data.smallImage.split(',').forEach(item => {
							arr.push({
								name: item,
								image: item
							})
						})
						this.imgList = arr
					};
					if (res.data.detailImage != null) {
						arrlist = res.data.detailImage.split(',')
					};
					this.detailImageList = arrlist;
				}
			})
		},
		reluchToCart() {
			let obj = {
				from: "product",
				id: this.productId,
			};
			storage.setCartBackbtn(obj);
			uni.switchTab({
				url: "/pages/tabbar/cart/cartList",
			});
		},

		/**
		 * 查询购物车总数量
		 */
		cartCount() {
			if (storage.getHasLogin()) {
				API_trade.getCartNum().then((res) => {
					this.nums = res.data.result;
				});
			}
		},

		showProductguige() {
			uni.showLoading({
				title: "加载中",
			});

			productSpecifications({
				id: this.routerVal.id
			}).then(res => {

				uni.hideLoading();
				this.skulist = res.data || []
				this.carshow = true;
			})

		},

		tostorePage() {
			uni.navigateTo({
				url: "../product/shopPage?id=" + this.goodsDetail.storeId,
			});
		},

		addToCartOrBuy(type) {
			if (type == "cart") {

				if (!this.currentskuid.id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择规格'
					})
				}
				if (this.num == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择数量'
					})
				}

				const currentCart = uni.getStorageSync("currentCart") || [];


				currentCart.push({
					num: this.num,
					currentskuid: this.currentskuid,
					product: this.goodsDetail
				})
				uni.setStorageSync("currentCart", currentCart);
				console.log(currentCart)
				uni.showToast({
					icon: "none",
					title: "添加成功"
				})
			}
			if (type == "buy") {
				// 判断是否有地址

				if (!this.currentskuid.id) {
					return uni.showToast({
						icon: 'none',
						title: '请选择规格'
					})
				}
				if (this.num == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请选择数量'
					})
				}


				uni.setStorageSync("currentBuy", {
					products: [{
						num: this.num,
						currentskuid: this.currentskuid,
						product: this.goodsDetail
					}]
				});
				uni.navigateTo({
					url: `/pages/order/fillorder?way=BUY_NOW`,
				});
			}
		},

		/**
		 * 收藏
		 */
		clickFavorite() {

			if (this.$options.filters.tipsToLogin()) {

				if (this.goodsDetail.isCollect == 1) {
					// 已收藏
					userDelCollect({
						type: 2,
						userId: storage.getUserInfo().id,
						collectId: this.routerVal.id
					}).then(res => {
						this.init()
					})

				} else {
					userCollect({
						type: 2,
						userId: storage.getUserInfo().id,
						collectId: this.routerVal.id
					}).then(res => {
						this.init()
					})
				}

			}

		},
	},
}
</script>

<style lang="scss" scoped>
@import "./product/style.scss";

.title {
	position: absolute;
	top: 60rpx;
	left: 50%;
	transform: translateX(-50%);
	font-family: PingFang;
	font-weight: bold;
	font-size: 33rpx;
	color: #FFFFFF;

}

.left-box {
	padding-left: 41rpx;
}

.swiper_view {
	width: 100%;
	height: 800rpx;
}


.proname {
	width: 100%;
	height: 180rpx;
	background-color: #FFFFFF;
}

.pronameview {
	padding: 10rpx 28rpx;
	color: rgb(61, 61, 61);
	font-size: 28rpx;
}

.proinduct {
	padding: 10rpx 28rpx;
	font-size: 24rpx;
	color: #e6e6e6;

}

.price {
	padding: 10rpx 28rpx;
	color: rgb(61, 61, 61);
}

.dividerview {
	height: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.u-divider {
	background: none !important;
	width: 100%;
}

.main-page {
	padding-bottom: 120rpx;
}

.icon-btn {
	width: 240rpx !important;
}

.carshowview {
	width: 100%;
	height: 840rpx;
	overflow-y: auto;
	position: relative;

	.goods-header {
		width: 100%;
		position: relative;
		height: 233rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.goods-img {
		width: 178rpx;
		height: 178rpx;
		position: absolute;
		top: 21rpx;
		left: 21rpx;
	}

	.goods-price {
		position: absolute;
		top: 42rpx;
		left: 223rpx;
	}

	.lsj {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
		line-height: 50rpx;
	}

	.price {
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 35rpx;
		color: #f76e00;
		padding-left: 20rpx;
	}

	.goods-kc {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
		opacity: 0.7;
		position: absolute;
		top: 93rpx;
		left: 224rpx;
	}

	.goods-spgg {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
		line-height: 44rpx;
		position: absolute;
		top: 140rpx;
		left: 224rpx;
	}

	.goods-sku {
		width: 100%;
		height: 375rpx;
		overflow-y: auto;
		border-bottom: 1px solid #f3f3f3;
		position: relative;
	}

	.skutitle {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;

		padding-top: 24rpx;
		padding-left: 26rpx;
	}

	.skulist {
		padding-left: 26rpx;
		margin-top: 29rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.skulistitem {
		min-width: 254rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 25rpx;
		color: #666666;
		cursor: pointer;
		border: 1px solid #f3f3f3;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
	}

	.skulight {
		border: 1px solid rgb(25, 189, 93);
	}
}

.numbox {
	width: 700rpx;
	margin: 0 auto;
	margin-top: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.numboxtitle {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 28rpx;
	color: #232323;
}

.btns {
	width: 680rpx;
	height: 87rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: PingFang;
	font-weight: bold;
	font-size: 28rpx;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;

	bottom: 15rpx;
}

.box-btn-card {
	height: 100%;
	width: 50%;
	background-color: rgb(245, 181, 64);
	line-height: 87rpx;
	text-align: center;
	border-radius: 40rpx 0 0 40rpx;
}

.box-btn-buy {
	height: 100%;
	width: 50%;
	background-color: rgb(103, 194, 66);
	line-height: 87rpx;
	text-align: center;
	border-radius: 0 40rpx 40rpx 0;
}
</style>
